<template>
  <div id="map-container"/>
  <a-modal v-model:visible="infoValue.show" title="新增点标记" @cancel="infoCancel" @ok="addMarker">
    {{ infoValue.lng }}
    <a-input ref="infoTitle" v-model:value="infoValue.title" placeholder="名称" @keyup.enter="addMarker"/>
  </a-modal>
</template>

<script setup>
import {createVNode, nextTick, onMounted, reactive, ref} from "vue";
import img from "@/assets/base-image-camera.png";
import {MapAddApi, MapListApi, MapRemoveApi} from "@/common/customs/mapView";
import {message, Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";

const infoValue = reactive({
  title: "",
  lng: [],
  show: false,
});
const infoTitle = ref();
let AMap = null;
let mapInstance = null;
let markers = [];
const center = [120.631946, 27.983144];
let infoWindow = ref();

const infoCancel = () => {
  infoValue.show = false;
  infoValue.lng = [];
  infoValue.title = "";
};

const addMarker = async () => {
  // mapInstance.setZoom(18);
  if (infoValue.title) {
    const api = new MapAddApi();
    api.params({
      jd: infoValue.lng[0],
      wd: infoValue.lng[1],
      name: infoValue.title,
    });
    await api.send();
    getList();
    infoCancel();
  }
};

const getList = async () => {
  const api = new MapListApi();
  await api.send();
  const {data} = await api.getDatas();
  const icon = new AMap.Icon({
    size: new AMap.Size(20, 20),
    // image: "@/assets/base-image-camera.png",
    image: img,
    imageOffset: new AMap.Pixel(0, 0),
    imageSize: new AMap.Size(20, 20),
  });
  data.data.forEach((dataKey) => {
    if (dataKey.wd === null) {
      return;
    }
    let marker = new AMap.Marker({
      icon,
      // draggable: true,
      // cursor: "move",
      position: [dataKey.jd, dataKey.wd],
      offset: new AMap.Pixel(-25, -25),
    });
    marker.content = dataKey.name;
    marker.id = dataKey.id;
    // marker.on("dragend", (e) => {
    //   // console.log("移动了", e, dataKey.id);
    //   // console.log(markers);
    //   request({
    //     url: "api/jwdedit"
    //   }, {}, {
    //     id: dataKey.id,
    //     jd: e.lnglat.lng,
    //     wd: e.lnglat.lat
    //   });
    // });
    marker.on("dblclick", (e) => {
      removeMarker(marker);
    });
    marker.on("click", () => {
      infoWindow.value.setContent(dataKey.name);
      infoWindow.value.open(mapInstance, marker.getPosition());
    });
    markers.push(marker);
    mapInstance.add(markers);
    // mapInstance.invalidate()
  });
};

const initMap = () => {
  mapInstance = new AMap.Map("map-container", {
    viewMode: "3D",
    pitch: 45,
    rotation: 0,
    zooms: [17, 25],
    pitchEnable: false,
    rotateEnable: false,
    zoom: 18,
    center,
  });
  infoWindow.value = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30), closeWhenClickMap: true});
  mapInstance.on("click", (event) => {
    console.log(`${event.lnglat.getLng()}, ${event.lnglat.getLat()}`);
    infoValue.lng = [event.lnglat.getLng(), event.lnglat.getLat()];
    infoValue.show = true;
    nextTick(() => {
      infoTitle.value.focus();
    });
  });
  var styleName = "amap://styles/blue";
  mapInstance.setMapStyle(styleName);
  getList();
};

const removeMarker = (data) => {
  let index = markers.indexOf(data);
  Modal.confirm({
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode("div", {style: "color:red;"}, `确认删除${data.content}?`),
    onOk: async () => {
      const api = new MapRemoveApi();
      api.params({id: data.id,});
      await api.send();
      const {code} = await api.getDatas();
      if (index > -1 && code === 0) {
        infoWindow.value.close();
        markers[index].remove();
        markers.splice(index, 1);
      } else {
        message.error("失败");
      }
    },
    onCancel() {
      console.log("Cancel");
    },
    class: "test",
  });
};
onMounted(() => {
  // const scriptEl = document.createElement("script");
  // scriptEl.src = "https://webapi.amap.com/maps?v=2.0&key=b5cc346dad2e1078dc72c083fafb2d3e&plugin=AMap.MoveAnimation";
  // document.body.appendChild(scriptEl);
  // scriptEl.onload = () => {
  AMap = window.AMap;
  initMap();
  // setTimeout(() => {
  //   initComplete.value = true;
  //   refresh();
  // }, 6000);
  // };
});

</script>

<style scoped>
#map-container {
  width: 100%;
  height: 100%;
}
</style>
